<template>
  <div>
    <!-- 边框 -->
    <el-card class="box-card" style="margin-top: 10px">
      <!-- 搜索框 -->
      <div style="margin-top: 15px; width: 30%">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <!-- 搜索框 -->
      <!-- 表格 -->
      <template>
        <el-table border :data="all" style="width: 100%; margin-top: 10px">
          <!-- # -->
          <el-table-column type="index" label="#" width="50"> </el-table-column>
          <!-- 订单编号 -->
          <el-table-column prop="order_number" label="订单编号" width="180">
          </el-table-column>
          <!-- 订单价格 -->
          <el-table-column prop="order_price" label="订单价格" width="180">
          </el-table-column>
          <!-- 是否付款 -->
          <el-table-column prop="pay_status" label="是否付款" width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.pay_status == 0"
                class="button1"
                type=""
                >未付款</el-button
              >
            </template>
          </el-table-column>
          <!-- 是否发货 -->
          <el-table-column prop="is_send" label="是否发货" width="180">
          </el-table-column>
          <!-- 下单时间 -->
          <el-table-column prop="create_time" label="下单时间" width="180">
            <template slot-scope="scope">
              {{ new Date(scope.row.create_time).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 修改 -->
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
              <!--  -->
              <el-button
                type="success"
                icon="el-icon-share"
                @click="dialogFormVisible = true"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 表格 -->
      <!-- 分页 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
        >
        </el-pagination>
      </div>
      <!-- 分页 -->
      <!-- 对话框 -->
      <el-dialog title="物流进度" :visible.sync="dialogFormVisible" >
        <!-- 步骤条 -->
        <div style="height: 900px">
          <el-steps direction="vertical" :active="1">
            <el-step title="已签收,签收人是(快递已送代理点如有问题请联系11053685196)先生/女士，如有疑问请联系派件员寒亭魏飞飞(11053685196、0530-18194261),
            如您未收到此快递,请拨打投诉电话:0530--17366376,感谢使用申通快递,期待再次为您服务
            
            " description="2020-07-15 12:39:56"
            ></el-step>
            <el-step title="山东潍坊寒亭营业厅-寒亭魏飞飞(11053685196,0530-18194261)-派件中
               " description="2020-07-15 08:46:54"></el-step>
             <el-step
              title="已到达-山东潍坊寒亭营业厅"
              description="2020-07-15 06:38:13"
            ></el-step>
             <el-step
              title="山东潍坊转运中心-已发往-山东潍坊寒亭公司"
              description="2020-07-14 20:56:45"
            ></el-step>
             <el-step
              title="已到达-山东潍坊转运中心"
              description="2020-07-14 20:52:44"
            ></el-step>
             <el-step
              title="已到达-山东潍坊转运中心"
              description="2020-07-14 17:43:48"
            ></el-step>
            <el-step
              title="山东临沂转运中心-已发往-山东潍坊转运中心"
              description="2020-07-14 10:53:46"
            ></el-step>
            <el-step
              title="已到达-山东临沂转运中心"
              description="2020-07-14 10:43:31"
            ></el-step>
            <el-step
              title="已到达-安徽合肥转运中心"
              description="2020-07-14 02:41:40"
            ></el-step>
             <el-step
              title="安徽阜阳转运中心-已发往-安徽合肥转运中心"
              description="2020-07-13 16:28:13"
            ></el-step>
             <el-step
              title="安徽利辛公司-已发往-安徽阜阳转运中心"
              description="2020-07-13 15:03:30"
            ></el-step>
             <el-step
              title="安徽利辛公司-已发往-安徽阜阳转运中心"
              description="2020-07-13 14:47:56"
            ></el-step>
             <el-step
              title="安徽利辛公司-城南吴彦祖-已收件"
              description="2020-07-13 14:37:06"
            ></el-step>
          </el-steps>
        </div>
      </el-dialog>
      <!-- 对话框 -->
    </el-card>
    <!-- 边框 -->
  </div>
</template>

<script>
import { orders,DIZHI } from "@/request/api.js";
export default {
  data() {
    return {
      //搜索定义
      input: "",
      //表格数据
      tableData: [],
      //备份数据
      list: [],
      //对话框状态
      dialogFormVisible: false,
      //页码
      params: {
        query: "",
        pagesize: 10,
        pagenum: 1,
      },
      //对话框高度
    //   formLabelheight: '1000px'
    };
  },
  methods: {
    //页面请求数据
    getOrders() {
      orders(this.params).then((res) => {
        console.log(res);
        this.tableData = res.data.data.goods;
        this.list = res.data.data.goods;
      });
    },
    //修改
    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
    },
    //分页
    //分页多少条
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
    },
    //第几页
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.params.pagenum = val;
    },
  },
  created() {
    this.getOrders();
  },
  mounted() {},
  components: {},
  computed: {
    all() {
      return (this.tableData = this.list.slice(
        (this.params.pagenum - 1) * this.params.pagesize,
        this.params.pagesize * this.params.pagenum
      ));
    },
  },
  watch: {},
};
</script>

<style lang='scss' scoped>
.button1 {
  background-color: #fce4e4;
  color: #f56d6e;
}
</style>

